<template>
  <div>
    <div>
      <!-- <h1>name: {{ p.name }}</h1>
      <h1>age: {{ p.age }}</h1>
      <h1>gender: {{ p.gender }}</h1> -->

      <h1>reactive修改对象 - v-text</h1>
      <p v-text="p.name"></p>
      <p v-text="p.age"></p>
      <p v-text="p.gender"></p>

      <h1>修改姓名 - function</h1>
      <button @click="changePersonName">修改姓名</button>
      <hr />
      <input type="number" v-model="p.age" />
      <br />
      <input type="text" v-model="p.name" />

      <hr />
      <h1>ref修改地址</h1>
      <b>address: {{ address }}</b>
      <hr />
      <button @click="changeAddress">修改城市</button>
      <hr />
      <h1>Computed - double age</h1>
      <p v-text="doubleAge"></p>
      <p v-text="doubleAge"></p>
      <p v-text="doubleAge"></p>

      <h1>属性 v-bind 测试</h1>
      <p v-bind:class="msg.type">{{ msg.content }}</p>
      <p :class="msg.type">{{ msg.content }}</p>
      <button class="button" @click="changeMessageType(MessageType.alert)">Alert</button>
      <button class="button" @click="changeMessageType(MessageType.warning)">Warning</button>
      <button class="button" @click="changeMessageType(MessageType.ok)">OK</button>

      <h2>布尔型Attribute</h2>
      <button :disabled="isButtonDisabled">disabled: {{ isButtonDisabled }}</button>
      <button @click="changeButtonDisabled">{{ isButtonDisabled ? 'enable' : 'disable' }}</button>

      <h2>动态绑定多个值</h2>
      <div v-bind="objectOfAttrs">hello 动态绑定多个值</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue'
import type { Person, Message } from '@/types'
import { MessageType } from '@/types'
// import Header from '@/components/Header.vue'

// const title = '初见'

const address = ref('重庆')
const p: Person = reactive({
  name: 'Arthur',
  age: 18,
  gender: 'male',
})

function changePersonName() {
  p.name = 'Arthur 2'
}

function changeAddress() {
  address.value = '上海'
}

const doubleAge = computed(() => {
  console.log('computed doubleAge')
  return p.age * 2
})

watch(
  () => address.value,
  (newVal, oldVal) => {
    console.log('address changed, newVal: ', newVal, '\t oldVal: ', oldVal)
  },
)

const msg: Message = reactive({
  type: MessageType.alert,
  content: 'this is a message',
})

function changeMessageType(type: MessageType) {
  msg.type = type
}

// 布尔型Attribute
const isButtonDisabled = ref(true)
function changeButtonDisabled() {
  isButtonDisabled.value = !isButtonDisabled.value
}

// 动态绑定多个值
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color: green',
}
</script>

<style scoped>
.alert {
  color: red;
}

.warning {
  color: yellow;
}

.ok {
  color: green;
}

.button {
  margin: 0 10px 10px 0px;
}
</style>
